<template>
    <view class="listsItem">
        <view class="listsVfor">
            <view class="listsTop">
                <u--image :showLoading="true" :src="detailData.image" width="126rpx" height="126rpx"
                          radius="0"></u--image>
                <view class="lists_right">
                    <view class="lists_">
                        <view>
                            <view class="lists_name">
                                <text>
                                    {{detailData.description}}
                                </text>
                            </view>
                        </view>
                    </view>
                    <view class="lists_illustrate u_flex">
                        <u--image :showLoading="true" :src="detailData.qrcode_image_text" width="88rpx" height="88rpx"
                                  radius="0"></u--image>
                        <view>
                            <text>{{ detailData.mobile }}</text>
                            <text>扫码添加客服微信</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {shopDetail} from "../../api/Home";

export default {
    name: "showBand.vue",
    data(){
      return {
          detailData:{}
      }
    },
    mounted() {
        this.getDetail()
    },
    methods: {
        async getDetail() {
            try {
                const res = await shopDetail({
                    shop_id:1
                });
                this.detailData = res.data
            } catch (err) {
                //TODO handle the exception
                console.log(err);
            }
        },
    }
}
</script>

<style scoped lang="scss">
.listsItem {
    .listsVfor {
        width: 95%;
        margin: 0px auto;
        margin-bottom: 30rpx;
        padding-bottom: 30rpx;
        background-color:#fff;
        padding-top:30rpx;
        padding-left:30rpx;
        border-radius: 32rpx;
        .listsTop {
            width: 100%;
            display: flex;
        }

        image {
            width: 190rpx;
            min-width: 190rpx;
            height: 200rpx;
            border-radius: 15rpx;
        }

        .lists_right {
            width: 70%;
            padding-left: 20rpx;
        // border:1px solid greenyellow;

            .lists_ {
                width: auto;
            // border:1px solid red;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .listsAddress {
                    text {
                        display: block;
                        font-size: 20rpx;
                        color: #b5b5b5;
                        text-align: right;
                        margin-bottom: 5rpx;
                    }
                }
            }

            .lists_name {
                display: flex;
                align-items: center;
                margin-bottom: 10rpx;

                text {
                    font-size: 28rpx;
                    font-weight: 500;
                    color: #000000;
                }
            }

            .lists_tag {
                display: flex;
                align-items: center;
                margin-top: 15rpx;

                /deep/ .u-tag--warning--plain {
                    border-color: #c3c3c3;
                    margin-right: 20rpx;
                }

                /deep/ .u-tag--mini {
                    margin-right: 20rpx;
                }

                /deep/ .u-tag-wrapper {
                    margin-right: 10rpx;
                }
            }

            .lists_illustrate {
                width: 80%;
                font-size: 24rpx;
                display: flex;
                align-items: center;
                color: #888888;
                text{
                    padding-left:10rpx;
                }

            }

            .u_flex{
                margin-top:5rpx;
                view{
                    text{
                        color: #000000;
                        display: block;
                        font-size:24rpx;
                        font-weight: 500;
                        margin-left:10rpx;
                        margin-bottom:5rpx;
                    }
                }
            }

            .NewFlex {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top:30rpx;
                text{
                    color:#029CFE;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    font-size: 28rpx;
                    text-align: left;
                    font-style: normal;
                }
            }
        }
    }
}
</style>